<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<style media="screen">
		.content p {
			text-indent: 0 !important;
		}
	</style>
</head>

<body class="white">
	<div id="app" style="display:none" v-show="true" class="app">
		<div class="app-content list list-catalog">
			<transition-group name="list" tag="ul">
				<li v-for="(item, index) of items" :key="item" @click="study(item)"
					:class="item.coursewareId==curCoursewareId?'current':''">
					<div class="dl">
						<img v-if="item.coursewareId==curCoursewareId" src="../../image/c0.png" alt="">
						<img v-else src="../../image/c0.png" alt="">
					</div>
					<div class="dr">
						<div class="l1">
							<span class="l1-title">
								{{item.coursewareTitle}}
							</span>
						</div>
						<div class="l2">
							<span class="learn-time">播放{{item.playNum}}次</span>
							<span class="like-time">收藏{{item.collectNum}}次</span>
						</div>
					</div>
				</li>
			</transition-group>
		</div>
	</div>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				loading: false,
				courseId: '',
				curCoursewareId: '',
				items: [],
			},
			mounted: function () {
				var $this = this;
				apiready = function () {
					$this.loading = false;
					$this.courseId = api.pageParam.courseId;
					$this.curCoursewareId = api.pageParam.curCoursewareId;
					var ccwList = JSON.parse(api.pageParam.ccwList)
					ccwList.forEach(function (item) {
						$this.items.push(item)
					});
				}
			},
			methods: {
				study: function (item) {
					var $this = this;
					api.sendEvent({
						name: 'study_new_chapter_event',
						extra: {
							courseId: $this.courseId,
							coursewareId: item.coursewareId
						}
					});
				}
			}
		});
	</script>
</body>

</html>
